<template>
  <el-dialog
    v-model="visible"
    title="陪诊师详情"
    width="800px"
    append-to-body
    @open="open"
    @close="close"
  >
    <div v-loading="loading" class="attendant-detail">
       <!-- 个人信息部分 -->
       <div class="info-section">
         <div class="info-content">
           <div class="avatar-section">
             <el-avatar
               v-if="attendantInfo.avatar"
               :size="80"
               :src="attendantInfo.avatar"
               fit="cover"
             />
             <el-avatar v-else :size="80" icon="User" />
             <div class="name">{{ attendantInfo.username || '-' }}</div>
             <div class="status-tag">
               <el-tag :type="attendantInfo.status === 0 ? 'success' : 'danger'" size="small">
                 {{ attendantInfo.status === 0 ? '已启用' : '已禁用' }}
               </el-tag>
             </div>
           </div>
           <div class="info-grid">
             <div class="info-item">
               <span class="label">真实姓名：</span>
               <span class="value">{{ attendantInfo.realName || '-' }}</span>
             </div>
             <div class="info-item">
               <span class="label">身份证号：</span>
               <span class="value">{{ attendantInfo.idCard || '-' }}</span>
             </div>
             <div class="info-item">
               <span class="label">手机号：</span>
               <span class="value">{{ attendantInfo.phone || '-' }}</span>
             </div>
             <div class="info-item">
               <span class="label">性别：</span>
               <span class="value">{{ attendantInfo.sex === 1 ? '男' : '女' }}</span>
             </div>
             <div class="info-item">
               <span class="label">年龄：</span>
               <span class="value">{{ attendantInfo.age || '-' }}岁</span>
             </div>
             <div class="info-item">
               <span class="label">状态：</span>
               <span class="value">{{ attendantInfo.status === 0 ? '启用' : '禁用' }}</span>
             </div>
           </div>
         </div>
       </div>

      <!-- 最近订单部分 -->
      <div class="orders-section">
        <div class="section-header">
          <h3 class="section-title">最近订单</h3>
          <el-button v-if="recentOrders.length > 0" type="primary" size="default" @click="handleViewAllOrders">
            查看所有订单
          </el-button>
        </div>
        <div v-if="recentOrders.length > 0" class="orders-table">
          <el-table :data="recentOrders" stripe>
            <el-table-column prop="orderNo" align="center" label="订单号"  show-overflow-tooltip />
            <el-table-column prop="itemHospitalName" align="center" label="医院"  width="150px" show-overflow-tooltip />
            <el-table-column prop="itemName" align="center" label="项目"  width="120px" show-overflow-tooltip />
            <el-table-column prop="itemPatientName" align="center" label="就诊人" width="80px" show-overflow-tooltip />
            <el-table-column label="预计收益" align="center" width="100px">
              <template #default="scope">
                <span class="amount-text">¥{{ centsToYuan(scope.row.expectedIncome) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" align="center" label="接单时间"  width="100px"  />
            <el-table-column label="状态"  align="center">
              <template #default="scope">
                <el-tag :type="getOrderStatusType(scope.row.status)" size="small">
                  {{ getOrderStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else class="no-orders">
          <el-empty description="暂无最近订单" />
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getAttendant, getAttendantRecentOrders } from '@/api/attendant/attendant'
import { centsToYuan } from '@/utils/money'

const props = defineProps({
  detailDialogVisible: {
    type: Boolean,
    default: false
  },
  attendantId: {
    type: [Number, String],
    default: null
  }
})

const emit = defineEmits(['handleClose'])
const router = useRouter()

const visible = ref(false)
const loading = ref(false)
const attendantInfo = ref({})
const recentOrders = ref([])

// 监听弹窗显示状态
watch(
  () => props.detailDialogVisible, 
  (val) => {
    visible.value = val
  }
)

const loadAttendantInfo = () => {
  loading.value = true
  getAttendant(props.attendantId).then(res => {
    attendantInfo.value = res.data || {}
  }).finally(() => {
    loading.value = false
  })
}

const loadRecentOrders = () => {
  loading.value = true
  getAttendantRecentOrders(props.attendantId).then(res => {
    recentOrders.value = res.data || []
  }).finally(() => {
    loading.value = false
  })
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  const statusMap = {
    1: 'warning', 
    2: 'success',
    3: 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    1: '待服务',
    2: '已完成',
    3: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 查看所有订单
const handleViewAllOrders = () => {
  // 关闭当前弹窗
  visible.value = false
  
  // 跳转到订单页面，并传递陪诊师真实姓名作为搜索条件
  router.push({
    path: '/attendant/takeOrder',
    query: {
      attendantName: attendantInfo.value.realName || ''
    }
  })
}

// 打开弹窗
const open = () => {
  loadAttendantInfo()
  loadRecentOrders()
}

// 关闭弹窗
const close = () => {
  visible.value = false
  emit('handleClose')
}
</script>

<style scoped>
.attendant-detail {
  padding: 20px 0;
}

.info-section, .orders-section {
  margin-bottom: 30px;
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-content {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.avatar-section {
  flex-shrink: 0;
  text-align: center;
  min-width: 120px;
}

.avatar-section .name {
  margin: 12px 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.status-tag {
  margin-top: 8px;
}

.info-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.info-item {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
  margin-right: 8px;
  font-size: 14px;
}

.value {
  color: #303133;
  font-size: 14px;
}

.orders-table {
  max-height: 400px;
  overflow-y: auto;
}

.amount-text {
  font-weight: 600;
  color: #7CBF50;
  font-size: 14px;
}

.no-orders {
  text-align: center;
}

.dialog-footer {
  text-align: right;
}
</style>
